import React, { Component } from 'react'
import { Button, Table, Icon } from 'antd'

const data = [
  {
    id: Math.random(),
    avatar: 'avatar',
    lastLoginAt: '2016-11-03 13:04:47',
    number: 12,
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    lastLoginAt: '2016-11-03 13:04:47',
    number: 12,
  },
  {
    id: Math.random(),
    avatar: 'avatar',
    lastLoginAt: '2016-11-03 13:04:47',
    number: 12,
  }
];

const columns = [{
  title: '用户ID',
  dataIndex: 'id',
  key: 'id',
}, {
  title: '头像',
  dataIndex: 'avatar',
  key: 'avatar',
}, {
  title: '最后登录时间',
  dataIndex: 'lastLoginAt',
  key: 'lastLoginAt',
}, {
  title: '发言数',
  dataIndex: 'number',
  key: 'number',
}, {
  title: '操作',
  key: 'action',
  render: (text, record) => (
    <span className="rt-table-op">
      <i className="iconfont icon-forbidden"></i> 禁言
      <i className="iconfont icon-details"></i> 详情
      <i className="iconfont icon-delete"></i>
    </span>
  ),
}];

export default class ChatRoomUser extends Component {
  render() {
    return (
      <div className="rt-concretion">
        <div className="rt-title-banner">
          <span className="rt-text">IM用户</span>
          <i className="iconfont icon-close"></i>
        </div>
        <div className="rt-room-user">
          <div className="rt-search-input">
            <input className="rt-input" placeholder=" 输入手机号搜索" />
            <Button>搜  索</Button>
          </div>
          <Table className="rt-table" columns={columns} dataSource={data} />
        </div>
      </div>
    )
  }
}